<template>
    <div class="dashboard" style="height: 100%;">


        <div class="head">
          <div class="txt1">数据统计</div>
          <!-- <div class="txt2">商城管理系统</div> -->
        </div>
        <div class="dashCon">

          <div class="lineBox">
            <div class="chartsBox">
              <div style="display: flex">
                <el-select v-model="user_no" filterable placeholder="请选择" clearable>
                    <el-option
                      v-for="item in userOptions"
                      :key="item.user_no"
                      :label="item.login_name"
                      :value="item.user_no">
                    </el-option>
                  </el-select>
                <el-button type="primary" size="mini" @click="initMainData" style="margin: 0 10px">确定</el-button>
              </div>
              <div class="charts">
                <el-table :data="mainData" height="340" border style="width: 100%">
                  <el-table-column prop="child_no" label="用户编码" align="center">
                  </el-table-column>
                  <el-table-column prop="title" ali label="头像" align="center">
                    <template slot-scope="scope">
                      <el-image
                          style="width: 30px;"
                          :src="scope.row.childUser.headImgUrl"
                          :preview-src-list="[scope.row.childUser.headImgUrl]">
                      </el-image>
                    </template>
                  </el-table-column>
                  <el-table-column prop="nickname" label="昵称" align="center">
                    <template slot-scope="scope">
                      <span>{{scope.row.childUser.nickname?scope.row.childUser.nickname:scope.row.childUser.login_name}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="orderPrice" label="销售额" align="center">
                    <template slot-scope="scope">
                      <span style="color: red;font-size: 18px;font-weight: bold;">￥{{scope.row.orderPrice}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="level" label="等级" align="center">
                    <template slot-scope="scope">
                      <span >{{scope.row.level==1?'一级团队':'二级团队'}}</span>
                    </template>
                  </el-table-column>
                </el-table>
              </div>

              <div style="display: flex;justify-content: space-between;margin-top: 20px">
                <div style="display: flex">
                  <el-date-picker
                    v-model="timeArr"
                    value-format="timestamp"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    @change="timeArr=$event;timeChange"
                    clearable >
                  </el-date-picker>
                  <el-select v-model="type" filterable placeholder="请选择" clearable>
                      <el-option
                        v-for="item in typeOptions"
                        :key="item.value"
                        :label="item.text"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  <el-button type="primary" size="mini" @click="initOrderData" style="margin: 0 10px">搜索</el-button>
                </div>
                <div>
                  <span style="color: red;font-size: 18px;font-weight: bold;">个人业绩：￥{{compute.allPrice1?compute.allPrice1:0}}</span>
                  <span style="color: red;font-size: 18px;font-weight: bold;padding-left: 20px;">下属业绩：￥{{compute.allPrice2?compute.allPrice2:0}}</span>
                </div>
              </div>
              <!-- <div class="charts" style="height: 400px">

              </div> -->

              <solely-table ref='solely-table' @onClickBtn="onClickBtn" @pageChange="pageChange" style="height: 600px;padding-top: 10px;"
              	@filtersChange="filtersChange" @onSelectionChange="onSelectionChange" @initMainData="initMainData"
              	:mainData='mainData1' :Pagination="paginate" :BtnInfo="btn_info" :FieldList='fields'
              	:optionData='optionData' :otherData='otherData' :BasicArguments="table_arguments">
              	<template v-slot:mainImg="mainImg">
              		<img style="width: 30px;float: left;" v-for="(item,index) in mainImg.data.mainImg" :key="index"
              			:src="item['url']" />
              	</template>
              	<template v-slot:expand="expand">
              		<div v-if="expand.data.reson">
              			<el-form label-position="left" inline class="demo-table-expand">
              				<el-form-item label="申请原因:">
              					<div>{{ expand.data.reson }}</div>
              				</el-form-item>
              			</el-form>
              		</div>
              		<div v-if="expand.data.snap_address">
              			<el-form label-position="left" inline class="demo-table-expand">
              				<el-form-item label="收货地址信息:">
              					<div>
              						<div><span style="font-weight: bold;">姓名：</span>{{ expand.data.snap_address.name }}
              						</div>
              						<div><span style="font-weight: bold;">电话：</span>{{ expand.data.snap_address.phone }}
              						</div>
              						<div><span
              								style="font-weight: bold;">地址：</span>{{ expand.data.snap_address.address }}{{ expand.data.snap_address.detail }}
              						</div>
              					</div>
              				</el-form-item>
              			</el-form>
              		</div>
              		<div >
              			<el-form label-position="left" inline class="demo-table-expand">
              				<el-form-item label="发货信息:">
              					<div>
              						<div><span style="font-weight: bold;">快递公司：</span>{{ expand.data.express_company }}
              						</div>
              						<div><span style="font-weight: bold;">快递单号：</span>{{ expand.data.express_no }}
              						</div>
              					</div>
              				</el-form-item>
              			</el-form>
              		</div>
              		<div>
              			<el-form label-position="left" inline class="demo-table-expand">
              				<el-form-item label="订单详情:">
              					<div style="display: flex;background-color: #f5f5f5;">
              						<div style="width:200px;text-align:center;border:1px solid #e1e1e1;">商品图片</div>
              						<div style="width:300px;text-align:center;border:1px solid #e1e1e1;">商品名称</div>
              						<div style="width:200px;text-align:center;border:1px solid #e1e1e1;">商品规格</div>
              						<div style="width:200px;text-align:center;border:1px solid #e1e1e1;">单价</div>
              						<div style="width:200px;text-align:center;border:1px solid #e1e1e1;">数量</div>
              					</div>
              					<div style="display: flex;line-height: 1.8;" v-for="(item,index) in expand.data.child"
              						:key="index">
              						<div
              							style="width:200px;text-align:center;border:1px solid #e1e1e1;display: flex;align-items: center;justify-content: center;">
              							<el-image style="width: 50px;margin: 10px;" :src="item.product_img"
              								:preview-src-list="[item.product_img]">
              							</el-image>
              						</div>
              						<div
              							style="width:300px;text-align:center;border:1px solid #e1e1e1;display: flex;align-items: center;justify-content: center;">
              							{{item.product_title}}
              						</div>
              						<div
              							style="width:200px;text-align:center;border:1px solid #e1e1e1;display: flex;align-items: center;justify-content: center;">
              							{{item.title}}
              						</div>
              						<div
              							style="width:200px;text-align:center;border:1px solid #e1e1e1;display: flex;align-items: center;justify-content: center;">
              							{{ item.unit_price}}
              						</div>
              						<div
              							style="width:200px;text-align:center;border:1px solid #e1e1e1;display: flex;align-items: center;justify-content: center;">
              							{{ item.count }}
              						</div>
              					</div>
              				</el-form-item>
              			</el-form>
              		</div>
              	</template>

              </solely-table>

            </div>
          </div>

        </div>


    </div>
</template>

<script>
  import dataJs from './data.js'
  export default dataJs
</script>


<style scoped>
  .dashboard{text-align: left;}
  .dashboard div{box-sizing: border-box;}
  .dashboard .head{padding: 20px; background-color: #f0f0f0}
  .dashboard .head .txt1{font-size: 22px;}
  .dashboard .head .txt2{font-size: 14px;color: #666;padding-top: 10px;}
  .dashboard .dashCon{padding: 20px;background-color: #f5f5f5;}
  .dashCon .cardBox{overflow: hidden;}
  .dashCon .card{width: 23.8%;background-color: #aaaaff;padding: 10px;float: left;height: 130px;margin-left: 1.6%;display: flex;align-items: center;}
  .dashCon .card:nth-child(1){margin-left: 0;}
  .iconBox{padding: 10px 10%;border-right: 1px solid #e1e1e1;font-size: 30px;}
  .card:nth-child(2n-1){color: #fff;}
  .card:nth-child(2n){background-color: #fff;}
  .cardTxt{padding-left: 12%;}
  .cardTxt h3{font-size: 26px;margin: initial;padding-bottom: 5px;}

  .lineBox{overflow: hidden;}
  .chartsBox{width: 100%;float: left;}
  .charts{background-color: #fff;padding: 20px;height: 380px;margin-top: 20px;}

  .otherBox{width: 28%;float: left;padding: 20px 0 0 20px;}
  .weather{background-color: #fff;overflow: hidden;}
  .weather .img{width: 40%;height: 200px;float: left;color: #fff;position: relative;overflow: hidden;}
  .weather img{position: absolute;left: 0;bottom: 0;right: 0;top: 0;height: 200px;}
  .weather .img h2{position: relative;font-size: 30px;text-align: center;margin: 25px 0 5px;}
  .weather .img div{position: relative;font-size: 14px;text-align: center;font-weight: bold;}
  .weatherTxt{float: left;width: 60%;padding: 0 10px;display: flex;flex-direction: column;justify-content: space-between;height: 200px;}
  .weatherTxt h2{margin: 15px 0;color: #aaaaff;}
  .weatherTxt div{padding-bottom: 5px;}
  .weatherTxt h4{font-weight: normal;color:#999;text-align: center;font-size: 12px;}

  .rank{background-color: #fff;padding: 20px;margin-top: 20px;height: 440px;}
  .rank h2{margin: 0 0 20px;}
  .rankPro{overflow: hidden;margin-bottom: 15px;display: flex;align-content: center;justify-content: space-between;}
  .rankPro img{width: 100px;height: 60px;}
  .rankPro .rankInfo{padding-left: 10px;display: flex;flex-direction: column;justify-content: space-between;height: 60px;flex: 1;padding-right: 50px;}
</style>
